<template>
	<view class="page-root" :style="{
        'background-color': bgclist[curbgcindex].value,'color':bgclist[curbgcindex].icon=='yj'?'#fff':'#333'
    }">
		<u-sticky :bgColor="bgclist[curbgcindex].value" offsetTop="0" customNavHeight="0">
			<u-status-bar></u-status-bar>
			<view class="zj" v-if="!show">
				<view class="">
					第1章 觉醒的武魂
				</view>
				<view class="">
					1/2507
				</view>
			</view>
			<view class="zj" v-else>
				<!-- <image @click="back" src="/static/detail/syz.png" class="back" mode=""></image> -->
				<u-icon name="arrow-left" @click="back" size="40rpx" :color="bgclist[curbgcindex].icon=='yj'?'#fff':'#333'"></u-icon>
				<view class="">
					第1章 觉醒的武魂
				</view>
			</view>
		</u-sticky>
		<view class="con" @click="show=!show" @touchmove="show=false">
			<view class="con__content" :style="{fontSize:ztvalue+'px'}">
				<u-parse :content="content" :tagStyle="style"></u-parse>
			</view>
			<view class="con__footer" v-if="!show">
				<view class="con__footer__item">
					<image src="/static/detail/syz.png" class="con__footer__item__icon" mode=""></image>
					上一章
				</view>
				<view class="con__footer__line">

				</view>
				<view class="con__footer__item" @click.stop="showml=true">
					<image src="/static/detail/ml.png" class="con__footer__item__icon" mode=""></image>
					目录
				</view>
				<view class="con__footer__line">

				</view>
				<view class="con__footer__item">
					下一章
					<image src="/static/detail/xyz.png" class="con__footer__item__icon" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 展开 -->
		<u-popup :show="show" @close="close" :overlay='false' zIndex="10976">
			<view class="popbox">
				<!-- 上面的操作 背景、字体 -->
				<!-- 背景 -->
				<view class="popbox__bjbox" v-if="showbj">
					<image v-for="(item,index) in bgclist" @click="clickbg(index)" :key="index"
						:class='curbgcindex==index?"bgcactive":""' :src="'/static/detail/'+item.icon+'.png'"
						class="popbox__bjbox__item" mode=""></image>
				</view>
				<!-- 字体 -->
				<view class="popbox__ztbox" v-if="showzt">
					<view class="popbox__ztbox__dx">
						<image src="/static/detail/a.png" class="popbox__ztbox__dx__icon1" mode="widthFix" @click="sx"></image>
						<view class="popbox__ztbox__dx__value">
							{{ztvalue}}
						</view>
						<image src="/static/detail/a(1).png" class="popbox__ztbox__dx__icon2" mode="widthFix" @click="fd"></image>
					</view>
					<view class="popbox__ztbox__dx">
						<view class="popbox__ztbox__dx__text">
							系统字体
						</view>
						<image src="/static/detail/xyz.png" class="popbox__ztbox__dx__more" mode=""></image>
					</view>
				</view>
				<!-- 选项 -->
				<view class="popbox__tab">
					<view class="popbox__tab__item" @click="showml=!showml,showzt=false,showbj=false">
						<image src="/static/detail/ml.png" class="popbox__tab__item__icon" v-if="!showml" mode=""></image>
						<image src="/static/detail/mlth.png" class="popbox__tab__item__icon" v-else mode=""></image>
						<view class="popbox__tab__item__text" :class="showml?'active':''">
							目录
						</view>
					</view>
					<view class="popbox__tab__item" @click="showbj=!showbj,showzt=false,showml=false">
						<image src="/static/detail/Frame.png" v-if="!showbj" class="popbox__tab__item__icon" mode="">
						</image>
						<image src="/static/detail/Frameth.png" v-else class="popbox__tab__item__icon" mode=""></image>
						<view class="popbox__tab__item__text" :class="showbj?'active':''">
							背景
						</view>
					</view>
					<view class="popbox__tab__item" @click="showzt=!showzt,showbj=false,showml=false">
						<image src="/static/detail/Frame(1).png" v-if="!showzt" class="popbox__tab__item__icon" mode="">
						</image>
						
						<image src="/static/detail/Frameth2.png" v-else class="popbox__tab__item__icon" mode=""></image>
						<view class="popbox__tab__item__text" :class="showzt?'active':''">
							字体
						</view>
					</view>
					<view class="popbox__tab__item">
						<image src="/static/detail/Frame(2).png" class="popbox__tab__item__icon" mode=""></image>

						<view class="popbox__tab__item__text">
							在线支付
						</view>
					</view>
					<view class="popbox__tab__item">
						<image src="/static/detail/Frame(3).png" class="popbox__tab__item__icon" mode=""></image>

						<view class="popbox__tab__item__text">
							加入书架
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 目录 -->
		<u-popup :show="showml" @close="showml=false" zIndex="10975">
			<view class="mulbox">
				
				<view class="mulbox__top">
					<u-status-bar></u-status-bar>
					<view class="mulbox__top__title">
						<image @click="showml=false" src="/static/detail/syz.png" class="back" mode=""></image>
						目录
						<image src="" class="back" mode=""></image>
					</view>
				</view>
				<!-- 筛选 -->
				<view class="mulbox__sx">
					<view class="">
						共2507章
					</view>
					<view class="mulbox__sx__xiala" @click="showsx=true">
						1-100章
						<u-icon name="arrow-down-fill" color="#333" size="24rpx"></u-icon>
					</view>
				</view>
				<!-- 列表 -->
				<scroll-view scroll-y="true" class="mulbox__list">
					<view class="mulbox__list__box">
						<view class="mulbox__list__box__item" v-for="(item,index) in mllist" :key="index" :style="{color:cur==index?'#51CAEF':''}" @click="clickzj(item,index)">
							第{{index+1}}章 {{item.name}}
							<view class="mulbox__list__box__item__check">
								<image src="/static/detail/suo.png" class="mulbox__list__box__item__check__suo" v-if='item.suo'></image>
								<view class="" v-else>
									<image src="/static/detail/nomlcheck.png" class="mulbox__list__box__item__check__icon" v-if="cur!=index"></image>
									<image src="/static/detail/mlcheck.png" class="mulbox__list__box__item__check__icon" v-else></image>
								</view>
								
							</view>
						</view>
						<u-status-bar></u-status-bar>
					</view>
				</scroll-view>
				
			</view>
		</u-popup>
		<!-- 筛选 -->
		<u-picker :show="showsx" closeOnClickOverlay class="pick" :columns="columns" @close='showsx=false' @cancel='showsx=false' @confirm='confirm'></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: `
				<P>九霄大陆，武道为尊，弱小的武者，都有千、万斤巨力，开碑裂石；而强大的武者，可斩断河流、劈开大山；更有武道皇者，通天彻地，遨游太虚。</p>
				<P>九霄大陆，武道为尊，弱小的武者，都有千、万斤巨力，开碑裂石；而强大的武者，可斩断河流、劈开大山；更有武道皇者，通天彻地，遨游太虚。</p>
				<P>九霄大陆，武道为尊，弱小的武者，都有千、万斤巨力，开碑裂石；而强大的武者，可斩断河流、劈开大山；更有武道皇者，通天彻地，遨游太虚。</p>
				<P>九霄大陆，武道为尊，弱小的武者，都有千、万斤巨力，开碑裂石；而强大的武者，可斩断河流、劈开大山；更有武道皇者，通天彻地，遨游太虚。</p>
				<P>九霄大陆，武道为尊，弱小的武者，都有千、万斤巨力，开碑裂石；而强大的武者，可斩断河流、劈开大山；更有武道皇者，通天彻地，遨游太虚。</p>
				<P>九霄大陆，武道为尊，弱小的武者，都有千、万斤巨力，开碑裂石；而强大的武者，可斩断河流、劈开大山；更有武道皇者，通天彻地，遨游太虚。</p>
				<P>九霄大陆，武道为尊，弱小的武者，都有千、万斤巨力，开碑裂石；而强大的武者，可斩断河流、劈开大山；更有武道皇者，通天彻地，遨游太虚。</p>
				<P>九霄大陆，武道为尊，弱小的武者，都有千、万斤巨力，开碑裂石；而强大的武者，可斩断河流、劈开大山；更有武道皇者，通天彻地，遨游太虚。</p>
				<P>九霄大陆，武道为尊，弱小的武者，都有千、万斤巨力，开碑裂石；而强大的武者，可斩断河流、劈开大山；更有武道皇者，通天彻地，遨游太虚。</p>
				<P>九霄大陆，武道为尊，弱小的武者，都有千、万斤巨力，开碑裂石；而强大的武者，可斩断河流、劈开大山；更有武道皇者，通天彻地，遨游太虚。</p>
				`,
				style: {
					// 字符串的形式
					p: 'text-indent: 2rem;margin-bottom:24rpx;',
				},
				show: false,
				showbj: false,
				showzt: false,
				bgclist: [{
						icon: 'Ellipse 245',
						value: '#f3f5f7',
						ischeck: true
					},
					{
						icon: 'Ellipse 246',
						value: '#d9c6a4',
						ischeck: false
					},
					{
						icon: 'Ellipse 247',
						value: '#fee6de',
						ischeck: false
					},
					{
						icon: 'Ellipse 248',
						value: '#e2eecc',
						ischeck: false
					},
					{
						icon: 'Ellipse 249',
						value: '#e8d8c9',
						ischeck: false
					},
					{
						icon: 'yj',
						value: '#333333',
						ischeck: false
					},
				],
				curbgcindex: 0,
				ztvalue:20,
				showml:false,
				mllist:[
					{name:'觉醒的武魂',suo:false},
					{name:'觉醒的武魂',suo:false},
					{name:'觉醒的武魂',suo:false},
					{name:'觉醒的武魂',suo:false},
					{name:'觉醒的武魂',suo:false},
					{name:'觉醒的武魂',suo:false},
					{name:'觉醒的武魂',suo:false},
					{name:'觉醒的武魂',suo:false},
					{name:'觉醒的武魂',suo:false},
					{name:'觉醒的武魂',suo:false},
					{name:'觉醒的武魂',suo:false},
					{name:'觉醒的武魂',suo:false},
					{name:'觉醒的武魂',suo:false},
					{name:'觉醒的武魂',suo:true},
					{name:'觉醒的武魂',suo:true},
					{name:'觉醒的武魂',suo:true},
					{name:'觉醒的武魂',suo:true},
					{name:'觉醒的武魂',suo:true},
					{name:'觉醒的武魂',suo:true},
					{name:'觉醒的武魂',suo:true},
					{name:'觉醒的武魂',suo:true},
					{name:'觉醒的武魂',suo:true},
					{name:'觉醒的武魂',suo:true},
					{name:'觉醒的武魂',suo:true},
					{name:'觉醒的武魂',suo:true},
					{name:'觉醒的武魂',suo:true},
					{name:'觉醒的武魂',suo:true},
					{name:'觉醒的武魂',suo:true},
				],
				columns:[
					 ['1-100章', '1-100章', '1-100章']
				],
				cur:0,
				showsx:false
			};
		},
		methods: {
			close() {
				this.show = false
				this.showbj = false
				this.showzt = false
				this.showml=false
			},
			clickbg(index){
				this.curbgcindex=index
				this.bgclist.map(t=>{
					t.ischeck=false
				})
				this.bgclist[index].ischeck=true
				uni.setStorageSync('xsbglist', this.bgclist)
				// console.log(this.bgclist)
			},
			sx(){
				if(this.ztvalue>10){
					this.ztvalue-=2
					uni.setStorageSync('xsztvalue', this.ztvalue)
				}
			},
			fd(){
				if(this.ztvalue<30){
					this.ztvalue+=2
					uni.setStorageSync('xsztvalue', this.ztvalue)
				}
				
			},
			clickzj(item,index){
				// if(item.suo){
				// 	// 执行需要给钱的操作
				// 	return
				// }
				this.cur=index
				this.showml=false
			},
			confirm(){
				
			}
		},
		onLoad() {
			let that = this
			if (uni.getStorageSync('xsbglist')) { //没有就存
				this.bgclist = uni.getStorageSync('xsbglist')
			} else {
				uni.setStorageSync('xsbglist', this.bgclist)
			}
			if (uni.getStorageSync('xsztvalue')) { //没有就存
				this.ztvalue = uni.getStorageSync('xsztvalue')
			} else {
				uni.setStorageSync('xsztvalue', this.ztvalue)
			}
			// console.log(this.ztvalue)
			// 计算出当前背景
			this.bgclist.map((t, i) => {
				if (t.ischeck) {
					that.curbgcindex = i
				}
			})
		}
	}
</script>

<style lang="scss">
	.page-root {
	    position: absolute;
	    top: 0;
	    width: 100%;
	    min-height: 100%;
	}
	.zj {
		width: 702rpx;
		height: 50rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 24rpx 24rpx 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.con {
		padding: 24rpx 24rpx 68rpx;

		&__content {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			// padding-bottom: 24rpx;
		}

		&__footer {
			height: 98rpx;
			background: #FFFFFF;
			border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&__item {
				width: 218rpx;
				height: 50rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				
				line-height: 50rpx;

				&__icon {
					width: 48rpx;
					height: 48rpx;
				}

			}

			&__line {
				width: 1rpx;
				height: 24rpx;
				background-color: #BBBBBB;
			}
		}
	}

	.back {
		width: 52rpx;
		height: 52rpx;
	}

	.popbox {
		padding-bottom: 24rpx;

		&__tab {
			display: flex;
			align-items: center;
			padding-top: 14rpx;

			&__item {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;

				&__icon {
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 2rpx;
				}

				&__text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 34rpx;
				}
			}
		}

		&__bjbox {
			padding: 32rpx 48rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&__item {
				width: 64rpx;
				height: 64rpx;
			}
		}
		&__ztbox{
			padding: 32rpx 24rpx 0;
			&__dx{
				padding: 0 24rpx;
				height: 64rpx;
				background: #F3F5F7;
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 32rpx;
				&__icon1{
					width: 18rpx;
				}
				&__icon2{
					width: 22rpx;
				}
				&__value{
					width: 64rpx;
					height: 64rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.08);
					border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				&__text{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 36rpx;
				}
				&__more{
					width: 52rpx;
					height: 52rpx;
				}
			}
		}
	}

	.active {
		color: #51CAEF !important;
	}

	.bgcactive {
		border: 1rpx solid #51CAEF;
		border-radius: 50%;
	}
	.mulbox{
		height: 100vh;
		&__top{
			background-color: #f3f5f7;
			&__title{
				padding: 0 24rpx;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
		&__sx{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 98rpx;
			padding: 0 24rpx;
			&__xiala{
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 50rpx;
			}
		}
		&__list{
			height: calc(100% - 88rpx - 98rpx);
			&__box{
				padding-left: 24rpx;
				padding-bottom: 130rpx;
				&__item{
					height: 116rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 24rpx;
					border-bottom: 1rpx solid #EEEEEE;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					line-height: 38rpx;
					&__check{
						display: flex;
						align-items: center;
						&__icon{
							width: 36rpx;
							height: 36rpx;
						}
						&__suo{
							width: 48rpx;
							height: 48rpx;
						}
					}
				}
			}
		}
	}
	.pick{
		/deep/.u-fade-enter-to{
			z-index: 10977!important;
		}
	}
</style>